<template>
    <div class="getGifts">
        <div class="getGifts-title">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>礼物中心</el-breadcrumb-item>
                <el-breadcrumb-item>收到的礼物</el-breadcrumb-item>
            </el-breadcrumb>
            <label style="width:300px;color:#ccc;">
                <span>月总支出 {{getCount}}</span>
            </label>
            <label class="Timersvalues">
                <el-date-picker v-model="Timersvalue" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </label>
            <label class="screenings">
                <!-- <span>筛选</span> -->
            </label>
        </div>
        <div class="getGifts-content">
            <ul>
                <li class="getGifts-content-list" v-for="(item,index) in GetgiftsList" :key="index">
                    <label>
                        <img :src="item.map.userinfo.avatar"/>
                        <label>
                            <span>{{item.map.userinfo.nick_name}}</span>
                            <span>{{item.create_time}}</span>
                        </label>
                        
                    </label>
                    <label v-for="(items,indexs) in item.map.giftinfo" :key="indexs">
                        <label>
                            <img :src="items.pic"/>
                            <span>x{{items.gift_name}}</span>
                        </label>
                        <label>
                            <span>{{items.amount}}猫币</span>
                        </label>
                        <label>
                            <span>回赠</span>
                        </label>
                    </label>
                </li>
            </ul>
        </div>
        <div class="Lvie-cl-de-con-pagination current">
            <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="1000"></el-pagination>
        </div>
        <div class="refresh" @click="Torefresh">
            <img src="/images/刷新@2x.png"/>
        </div>
    </div>
</template>
<script>
export default {
    name:'getGifts',
    inject: ['reload'],
    data(){
        return{
            Timersvalue: [],
            userinfo:JSON.parse(localStorage.getItem('userinfo')),
            GetgiftsList:[],
            getCount:'',
        }
    },
    created(){
        let date = new Date()
        let yy = date.getFullYear()
        let mm = date.getMonth() 
        let dd = date.getDate()
        this.Timersvalue = [new Date(yy,mm,1),new Date(yy,mm,dd)]
        this.GetGiftList()
    },
    methods:{
        handleCurrentChange(val) {
            this.currentPage = val
            this.GetGiftList()
        },
        GetGiftList(){//收到的礼物列表
        console.log(this.Timersvalue)
            let yy,mm,dd,date= []
            this.Timersvalue.map(item=>{
                yy = item.getFullYear()
                mm = item.getMonth() + 1
                dd = item.getDate()
                if(mm<10){
                    mm = '0' + mm
                }
                if(dd<10){
                    dd = '0' + dd
                }
                date.push(yy+'-'+mm+'-'+dd)
            })
            console.log(date)
            var data = {
                currentPage:this.currentPage,
                pageSize:20,
                payment_id:this.userinfo.user_id,
                type:'gift',
                transaction_type:true,
                start_time:date[0] ,
                end_time:date[1] ,
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userOrder/queryGiftListPage',
                params:data,
            }).then((response) =>{
                console.log(response,'我收到的礼物')
                this.GetgiftsList = response.data.data.userOrderEntities
                this.getCount = response.data.data.getCount
            }).catch((error) =>{
                console.log(error)
            })
        },
        Torefresh(){//刷新
            this.reload()
        }
    }
}
</script>
<style lang="less" scoped>
    .current{
        height: 85px;
        text-align: center;
        padding-top: 48px;
    }
    .getGifts{
        position: relative;
        background: #ffffff;
        border-radius: 20px;
    }
    .getGifts-title{
        position: relative;
        width: 90%;
        height: 40px;
        margin: 0 auto;
        border-bottom: 1px solid #2DC7C8;
        padding-top: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom : 15px;
        /deep/.el-breadcrumb{
            width: 50%;
            border-left: 14px solid #2DC7C8;
            padding-left: 2%;
        }
        /deep/.el-breadcrumb__inner{
            color: #2DC7C8!important;
            font-size: 20px!important;
            font-weight: bold!important;
        }
        /deep/.el-breadcrumb__separator{
            color: #2DC7C8;
        }
        /deep/.el-breadcrumb__inner.is-link{
            color: #2DC7C8;
            font-size: 20px;
            font-weight: bold;
        }
    }
    .Timersvalues{
        width: 44%;
        margin-left: 29%;
        /deep/.el-range-editor{
            width: 100%;
            height: 30px;
            border-radius: 15px;
            border: 1px solid #47CECF;
            /deep/.el-range-separator{
                line-height: 22px;
            }
            /deep/.el-range__icon{
                line-height: 22px;
            }
            /deep/.el-range__close-icon{
                display: none;
            }
        }
    }
    .screenings{
        width: 10%;
        padding-left: 2%;
        span{
            display: inline-block;
            width: 100%;
            height: 30px;
            background:rgba(71,206,207,1);
            border-radius:15px;
            line-height: 30px;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
        }
    }
    /*内容样式*/
    .getGifts-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        ul{
            position: relative;
            width: 96%;
            list-style: none;
            padding: 0;
            margin: 0 auto;
            margin-top: 10px;
            padding-bottom: 60px;
        }
    }
    .getGifts-content-list{
        display: flex;
        width: 100%;
        height: 60px;
        justify-content: space-between;
        border-bottom: 1px solid #E9E9E9;
        label{
            width: 40%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            img{
                width: 42px;
                border-radius: 20px;
            }
        }
    }
    .getGifts-content-list>label:first-child{
        label{
            display: block;
            width: 86%;
            display: flex;
            align-items: center;
           
            flex-wrap: wrap;
            span{
                width: 100%;
                &:first-child{
                    color: #484848;
                    font-size: 16px;
                    font-weight: bold;
                }
                &:last-child{
                    color: #C2C2C2;
                    font-size: 14px;
                }
            }
        }
    }
     .getGifts-content-list>label:last-child{
         display: flex;
         width: 40%;
         align-items: center;
         label{
             width: 20%;
             font-size: 12px;
             color: #B5B5B5;
             justify-content: center;
             &:first-child{
                 width: 30%;
                img{
                    width: 40px;
                }
                span{
                    color: #A6A6A6;
                }
            }
            &:last-child{
                color: #3BC7C8;
                font-size: 14px;
                cursor: pointer;
                margin-left: auto;
                span{
                    width: 100%;
                    text-align: right;
                }
            }
        }
    }
     /*底部刷新按钮*/
    .refresh{
        position: fixed;
        right: 1%;
        bottom: 40px;
        cursor: pointer;
    }
</style>